package com.example.animation

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight

@Composable
fun AnimationVisibilityDemo() {
    var state by remember { mutableStateOf(true) }

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Column(
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            AnimatedVisibility(
                visible = state
            ) {
                Text(
                    text = "Hello Jetpack Compose",
                    fontWeight = FontWeight.W900,
                    style = MaterialTheme.typography.h5
                )
            }
            Button(
                onClick = { state = !state }
            ) {
                Text(text = if (state) "隐藏" else "出现")
            }
        }
    }
}

//EnterTransition 定义了当一个 AnimatedVisibility Composable 变得可见时，它是如何出现在屏幕上的
//
//现可用的 3 种 EnterTransition 的类别分别是：
//
//fade fadeIn
//slide：slideIn, slideInHorizontally, slideInVertically
//expand：expandIn, expandHorizontally, expandVertically
